<template>
	<view class="">
		<!-- 弹出框 -->
		<view class="masks" @click="colseBtn" v-if="isSHow"></view>
		<view class="kuangs paddingA40 marR40 marL40 boxSize " v-if="isSHow">
			<!-- <image class="iconSize30 floatR" src="" mode="" @click="colseBtn"></image> -->
			<view class="FontCenter fontSize16 fontWei marB60 marT60 widP100">
				<view class="marB40">
					{{zdTit}}
				</view>
				<view class="">
					{{zdTxt}}
				</view>
				
			</view>
			<view class="display widP100 marT80">
				<view class="kuangbtn" @click="colseBtn">
					取消
				</view>
				<view class="kuangbtn kuangbtn1" @click="zdBtn">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(['colseBtn','zdBtn'])
	const props = defineProps({
		zdTit: {
			type: String,
			default: '提示文字'
		},
		zdTxt: {
			type: String,
			default: '提示内容'
		},
		isSHow:{
			type: Boolean,
			default: false
		}		
	})
	const colseBtn = () => {
		emit('colseBtn')
	}
	const zdBtn = () => {
		emit('zdBtn')
	}
</script>

<style scoped>
.masks {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #2F2F2F;
		opacity: 0.8;
		z-index: 99;
	}

	.kuangs {
		width: 90%;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		top: 30%;
		z-index: 999;
		left: 5%;
	}

	.kuangbtn {
		width: 316rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 60rpx 0px 0px 60rpx;
		background-color: rgba(246, 247, 251, 100);
		color: rgba(47, 47, 47, 100);
		font-size: 14px;
		text-align: center;
		border: 1px solid rgba(47, 47, 47, 100);
	}

	.kuangbtn1 {
		border-radius: 0px 60rpx 60rpx 0px;
		background-color: rgba(47, 47, 47, 100);
		color: #fff;
	}
	.paddingA40 {
		padding: 40rpx;
	}
	.marR40 {
		margin-bottom: 40rpx;
	}
	.boxSize {
		box-sizing: border-box;
	}
	.marB40 {
		margin-bottom: 40rpx;
	}
	.FontCenter {
		text-align: center;
	}
	
	.fontSize16 {
		font-size: 32rpx;
	}
	.fontBold {
		font-weight: bold;
	}
	.marB60 {
		margin-bottom: 60rpx;
	}
	.marT60 {
		margin-top: 60rpx;
	}
	.widP100 {
		width: 100%;
	}
	.marT80 {
		margin-top: 80rpx;
	}
	.iconSize30 {
		width: 62rpx;
		height: 62rpx;
	}
	.floatR {
		float: right;
	}
	.display {
		display: flex;
	}
	.fontWei {
		font-weight: bold;
	}
</style>